<template>
  <view class="location-container">
    <!-- 顶部状态展示 -->
    <view class="status-box">
      <text class="status-text">{{locationStatus}}</text>
    </view>
    <map style="width: 100%; height: 300px;" :latitude="location.latitude" :longitude="location.longitude" :markers="covers">
    				</map>
    <!-- 位置信息展示 -->
    <view class="location-info" v-if="location.latitude">
      <view class="info-item">
        <text class="label">经度：</text>
        <text class="value">{{location.longitude}}</text>
      </view>
      <view class="info-item">
        <text class="label">纬度：</text>
        <text class="value">{{location.latitude}}</text>
      </view>
      <view class="info-item">
        <text class="label">地址：</text>
        <text class="value">{{location.address}}</text>
      </view>
    </view>
    
    <!-- 定位按钮 -->
    <button class="locate-btn" @click="getLocation">重新定位</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      locationStatus: '准备定位...',
      location: {
        latitude: '',
        longitude: '',
        address: ''
      }
    }
  },
  
  onLoad() {
    this.getLocation()
  },
  
  methods: {
    getLocation() {
      this.locationStatus = '定位中...'
      
      uni.getLocation({
        type: 'wgs84',
        success: res => {
          this.location.latitude = res.latitude
          this.location.longitude = res.longitude
          this.locationStatus = '定位成功'
          
          // 获取详细地址
          this.getAddress(res.latitude, res.longitude)
        },
        fail: err => {
          this.locationStatus = '定位失败，请检查定位权限'
          console.error('定位错误：', err)
        }
      })
    },
    
    getAddress(latitude, longitude) {
      uni.request({
        url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=SN6BZ-7H7RJ-IFZF4-KVM7J-J2YJH-VUF47`,
        success: res => {
          if (res.data.status === 0) {
            this.location.address = res.data.result.address
          }
        },
        fail: err => {
          console.error('获取地址失败：', err)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.location-container {
  padding: 20px;
  
  .status-box {
    text-align: center;
    margin-bottom: 30px;
    
    .status-text {
      font-size: 16px;
      color: #666;
    }
  }
  
  .location-info {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 30px;
    
    .info-item {
      margin-bottom: 10px;
      
      .label {
        color: #666;
      }
      
      .value {
        color: #333;
        margin-left: 10px;
      }
    }
  }
  
  .locate-btn {
    background: #007AFF;
    color: #fff;
    
    &:active {
      background: #0062cc;
    }
  }
}
</style>